<template>
  <div style="display: flex; justify-content: space-between; flex-wrap: wrap">
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options1"
      :option="options1"
      echartId="fifth-1"
    />
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options2"
      :option="options2"
      echartId="fifth-2"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      options1: {
        title: {
          text: "颅内动脉瘤手术率",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
      },
      options2: {
        title: {
          text: "数据对比",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        legend: {
          top: "10%",
          data: ["接入栓塞术", "闭夹术", "复合手术"],
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "接入栓塞术",
            data: [1, 3, 5, 3, 5, 1, 3],
            type: "line",
            smooth: true,
          },
          {
            name: "闭夹术",
            data: [2, 1, 2, 1, 1, 2, 2],
            type: "line",
            smooth: true,
          },
          {
            name: "复合手术",
            data: [5, 3, 3, 2, 3, 1, 1],
            type: "line",
            smooth: true,
          },
        ],
      },
    };
  },
  methods: {
    // 新数据变化, 刷新chart图表
    refresh(jmrsData) {
      const xAxisData = jmrsData.map((item) => {
        return this.$moment(item.time).format("yyyy-MM-dd");
      });
      const seriesData = jmrsData.map((item) => {
        return item.total;
      });
      this.options1.xAxis.data = [...xAxisData];
      this.options1.series[0].data = [...seriesData];
      this.$refs.options1.updateChart();
    },
  },
};
</script>
<style scoped></style>
